<template>
  <n-dropdown :options="options" @select="handleSelect">
    <div class="flex items-center">
      <RemoteAvatar :src="userInfo.avatar"></RemoteAvatar>
      <div class="font-bold text-lg">{{ userInfo.username }}</div>
    </div>
  </n-dropdown>

</template>

<script setup lang="ts">


import {storeToRefs} from "pinia";
import { useUserStore} from "@/store/module/user";
import RemoteAvatar from "@/components/pc/avatar/RemoteAvatar.vue";
import {renderIcon} from "@/utils";
import api from "@/api";

const {userInfo} = storeToRefs(useUserStore())
const userStore =useUserStore()

const options = [
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon('icon-park:user-positioning')
  }
]
const handleSelect = (key: any) => {
  if (key === 'logout') {
    api.user.logout().then((res => {
      if (res.data.code === 0) {
        window.$message.success(res.data.msg)
        userStore.logout()
      }
    }))
  }
}
</script>

<style scoped>

</style>